<template>
	<view>
		<view class="headPicture">
			<image src="../../static/background/headBackground.jpg" mode=""></image>
		</view>
		<view class="container">
			<image class="background" src="https://gd-hbimg.huaban.com/c46ef03b3a30d53d99f07f7971833156763c0b33ff218-xHtCAs_fw480webp" mode=""></image>
			
			<view class="settingBox" v-for="item in list">
				<image :src="item.imgUrl"></image>
				<view class="text">
					<view class="text1">{{item.text1}}</view>
					<view class="info">{{item.info}}</view>
				</view>
				<image src="https://gd-hbimg.huaban.com/0cc6d1870ce19a880d80085c4b339f8f982dc93f17d2-zyOBVK_fw480webp"></image>
			</view>
			
			<view class="button">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						imgUrl: 'https://gd-hbimg.huaban.com/b3da8dd59a06d8f39abcf1ae113407b73227c8391c14-XFa9qY_fw480webp',
						text1: '学校',
						info: '广东东软学院'
					},
					{
						imgUrl: 'https://gd-hbimg.huaban.com/f65ea5099cb91bdc173a561f1f376a9f8c572e55cfb-7ic5OJ_fw480webp',
						text1: '姓名',
						info: '某某某'
					},
					{
						imgUrl: 'https://gd-hbimg.huaban.com/58d05caeb621ee3e8ce543b9723a9edbd6860371e81-zN4iHy_fw480webp',
						text1: '班级',
						info: '22网络3班'
					},
					{
						imgUrl: 'https://gd-hbimg.huaban.com/35eaaf1c087f66859237df8c14e7cc87c0c5d40ed22-2zqbL1_fw480webp',
						text1: '手机号码',
						info: '12345678901'
					}
				],
			}
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	.headPicture{
		width: 100%;
		height: 296rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.container{
		width: 100%;
		min-height: 1037rpx;
		position: absolute;
		top: 253rpx;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		background-color: #fff;
		z-index: 1;
		padding-top: 60rpx;
		.settingBox{
			background-color: #F0F5FF;
			z-index: 999;
			width: 90%;
			height: 146rpx;
			box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
			border-radius: 14px;
			margin: auto;
			margin-bottom: 40rpx;
			display: flex;
			justify-content: space-around;
			image{
				margin-top: 26rpx;
				width: 90rpx;
				height: 90rpx;
			}
			.text{
				padding-top: 23rpx;
				text-align: left;
				width: 57%;
				height: 100%;
				.text1{
					height: 48rpx;
					font-size: 17px;
					color: #767676;
				}
				.info{
					height: 20rpx;
					font-size: 19px;
				}
			}
		}
		.button{
			margin: auto;
			margin-top: 89rpx;
			text-align: center;
			line-height: 124rpx;
			border-radius: 50px;
			width: 75%;
			height: 120rpx;
			font-size: 20px;
			color: #fff;
			background-color: #51B4FA;
		}
		
		.background{
			width: 100%;
			height: 1037rpx;
			position: absolute;
			top: 1rpx;
			opacity: 0.6;
			z-index: 0;
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
		}
	}
	
</style>

